<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加采集规则</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon" />
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>
<div id="container">
    <div class="layui-form layui-form-item">
        <label class="layui-form-label">选择网站</label>
        <div class="layui-input-block">
            <select id="selectWeb" name="city" lay-verify="required">
                <option value="1688">1688</option>
                <option value="淘宝">淘宝</option>
                <option value="网商园">网商园</option>
            </select>
        </div>
    </div>
    <div class="layui-form layui-form-item">
        <label class="layui-form-label">选择字段</label>
        <div class="layui-input-block">
            <select id="selectAttr" name="city" lay-verify="required">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">JQ选择器</label>
        <div class="layui-input-block">
            <input type="text" id="executeJavascript" name="title" required lay-verify="required"
                   placeholder="请输入jquery选择器" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button id="save" class="layui-btn layui-btn-normal">保存规则</button>

</div>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>序号</th>
        <th>类别</th>
        <th>列名</th>
        <th>JQ选择器</th>
    </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
</body>
<script>

    $(function () {
        initAttributeList();
        getCollectRuleList();
    });

    function initAttributeList() {
        $.ajax({
            url: serverURL + "/collector/fieldList",
            type: "GET",
            data: {},
            success: function (data) {
                if (data.data == null) {
                    layer.msg(data.meta);
                    return;
                }

                for (var i = 0; i < data.data.length; i++) {
                    var option = getJointElement("<option value='",
                        data.data[i].fieldName,
                        " '>",
                        data.data[i].fieldName,
                        "</option>");//"<option value=''></option>";
                    $("#selectAttr").append(option);
                }
                layui.use('form', function () {
                    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

                    //但是，如果你的HTML是动态生成的，自动渲染就会失效
                    //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
                    form.render();
                });
            },
            error: function (e) {
                console.log(e)
            }

        });
    }

    $("#save").click(function () {
        submitCollect();
    });

    function submitCollect() {
        var category = $("#selectWeb").val();
        var fieldName = $("#selectAttr").val();

        //collectValue
        var executeJavascript = $("#executeJavascript").val();
        console.log(category);
        $.ajax({
            url: serverURL + "/collector/saveCollectCategory",
            type: "POST",
            data: {
                category: category,
                fieldName: fieldName,
                executeJavascript: executeJavascript
            },
            success: function (data) {
                if (data.data == null) {
                    layer.msg(data.meta);
                } else {
                    layer.msg("添加成功");
                }
            },
            error: function (e) {
                console.log(e)
            }
        });

    }

    function getCollectRuleList() {
        $.ajax({
            url: serverURL + "/collector/collectRuleList",
            type: "GET",
            data: {},
            success: function (data) {
                if (data.data == null) {
                    layer.msg(data.meta);
                    return;
                }

                for (var i = 0; i < data.data.length; i++) {
                    var element = getJointElement("<tr>",
                        "<td>",
                        (i + 1),
                        "</td>",
                        "<td>",
                        data.data[i].category,
                        "</td>",
                        "<td>",
                        data.data[i].fieldName,
                        "</td>",
                        "<td>",
                        "<div class=\"layui-form-item layui-form-text\">",
                        "<div class=\"layui-input-block\">",
                        "<textarea  class=\"layui-textarea\" readonly='readonly'>",
                        replaceAllString("javaSplit", "<------------->", data.data[i].executeJavascript),
                        "</textarea>",
                        "</div>",
                        "</div>",
                        "</td>",
                        "</tr>");
                    $("#tbody").append(element);
                }
            },
            error: function (e) {
                console.log(e)
            }
        });

    }


</script>
</html>